<script>


import {manageComment} from "../../../api/comment";
import CommentItem from "../../../components/comment/CommentItem.vue";

export default {
    name: "Comment",
    components: {CommentItem},
    data() {
        return {
            commentList:[],
            param:{
                current:0,
                size:5
            },
            pageInfo:{
                pages:0,
                total:0,
            },
            flag:false
        }
    },
    methods: {
        select(flag){
          this.flag=flag
          this.param.current=0;
          this.commentList=[]
          this.pageComment()
        },
        pageComment(){
            this.param.current++;
            this.param.flag=this.flag;
            manageComment(this.param)
            .then(res=>{
                if (res.code===200){
                    this.commentList=this.commentList.concat(res.data.records)
                    this.pageInfo.pages=res.data.pages
                    this.pageInfo.total=res.data.total
                }
            })
        },
        deleteItem(index){
         this.commentList.splice(index,1)
        }
    },
    mounted() {
        this.param.userId=this.user.userId
        this.pageComment()
    },
    computed: {
        user() {
            return this.$store.state.userInfo;
        }
    }
}
</script>
<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div class="flex column" style="width: 100%">
                <div class="flex row align-center space-between" style="width: 100%">
                    <h2>评论管理</h2>
                    <div class="flex row">
                        <el-button @click="select(false)">显示列表</el-button>
                        <el-button @click="select(true)">垃圾箱</el-button>
                    </div>
                </div>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex column" style="width: 100%">
                <CommentItem v-for="(item,i) in commentList" :value="item" :index="i" @deleteItem="deleteItem"/>
                <el-button v-if="pageInfo.pages>param.current" @click="pageComment">more</el-button>
            </div>
        </div>

    </div>
</template>

<style scoped>

.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}

</style>
